<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--=============== FAVICON ===============-->
        <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

        <!--=============== BOXICONS ===============-->
        <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

        <!--=============== SWIPER CSS ===============--> 
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Responsive Christmas Website - Bedimcode</title>
    </head>
    <body>
        <!--==================== HEADER ====================-->
        <header class="header" id="header">
            <nav class="nav container">
                <a href="#" class="nav__logo">
                    <img src="assets\img\s5bf3825b320ab.png" alt="" class="nav__logo-img"> 
                    “文韵不息”非遗文化交流平台
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#home" class="nav__link active-link">平台首页</a>
                        </li>
                        <li class="nav__item">
                            <a href="#celebrate" class="nav__link">非遗项目</a>
                        </li>
                        <li class="nav__item">
                            <a href="#gift" class="nav__link">非遗作品</a>
                        </li>
                        <li class="nav__item">
                            <a href="#new" class="nav__link">非遗传人</a>
                        </li>
                    </ul>

                    <div class="nav__close" id="nav-close">
                        <i class='bx bx-x' ></i>
                    </div>

                    <img src="assets/img/nav-light.png" alt="" class="nav__img">
                </div>
                <div class="nav__btns">
                    <!-- Theme change button -->
                    <i class='bx bx-moon change-theme' id="theme-button"></i>

                    <!-- Toggle button -->
                    <div class="nav__toggle" id="nav-toggle">
                        <i class='bx bx-grid-alt' ></i>
                    </div>
                </div>

            </nav>
        </header>

        <!--==================== MAIN ====================-->
        <main class="main">
            <!--==================== HOME ====================-->
            <section class="home" id="home">
                <div class="home__container container grid">
                    <img src="assets\img\s5bebc0f39fb2e.png" alt="" class="home__img">

                    <div class="home__data">
                        <h1 class="home__title"> “文韵不息” <br>  非遗文化交流平台</h1>
                        <p class="home__description">
                            "让思想的火花在此碰撞."
                        </p>
                        <a href="#" class="button">立即开始</a>
                    </div>
                </div>
            </section>

            <!--==================== GIVING ====================-->
            <section class="giving section container">
                <h2 class="section__title">
                    泱泱中华·万古江河<br> 非遗资源
                </h2>

                <div class="giving__container grid">
                    <div class="giving__content">
                        <img src="assets\img\展览.png" alt="" class="giving__img">
                        <h3 class="giving__title">展览</h3>
                        <p class="giving__description">文化和自然遗产日--非遗惠万家，关系你我他，保护人民非遗，共享美好生活。</p>
                    </div>

                    <div class="giving__content">
                        <img src="assets\img\指尖上的非遗.png" alt="" class="giving__img">
                        <h3 class="giving__title">影音</h3>
                        <p class="giving__description">“故事故人”“乐舞多情”“匠心致美”“天人和合”，感受非遗根植于不同民族、不同地域所焕发的魅力</p>
                    </div>

                    <div class="giving__content">
                        <img src="assets\img\文化进万家，影像忆春节.png" alt="" class="giving__img">
                        <h3 class="giving__title">图集</h3>
                        <p class="giving__description">“文化进万家 影像忆春节” ，让我们一起重温那些令人咂舌的精美艺术摄影吧。                      </p>
                    </div>
                </div>
            </section>

            <!--==================== CELEBRATE ====================-->
            <section class="celebrate section container" id="celebrate">
                <div class="celebrate__container grid">
                    <div class="celebrate__data">
                        <h2 class="section__title celebrate__title">
                            申报指南 <br> 
                        </h2>
                        <p class="celebrate__description">
                            一、多国联合申报材料
                            （一）如果遗产项目存在于一个以上缔约国领土之上，鼓励相关缔约国联合提交急需保护的非物质文化遗产名录和人类非物质文化遗产代表作名录的多国申报材料。
                            （二）委员会鼓励提交分地区或地区计划、项目和活动，以及地理上非毗邻地区缔约国共同开展的计划、项目和活动。缔约国可单独或联合提交这些推荐。
                        </p>
                        <a href="#" class="button">了解更多</a>
                    </div>

                    <img src="assets\img\十四五非遗保护规划.png" alt="" class="celebrate__img">
                </div>
            </section>

            <!--==================== GIFT ====================-->
            <section class="gift section container" id="gift">
                <h2 class="section__title">国家级非物质文化遗产代表性项目名录</h2>

                <div class="gift__container grid">
                    <article class="gift__card">
                        <img src="assets\img\民间文学.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">民间文学</h3>
                        <span class="gift__title"></span>
                    </article>

                    <article class="gift__card">
                        <img src="assets\img\传统音乐.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">传统音乐</h3>
                        <span class="gift__title">
                        </span>
                    </article>

                    <article class="gift__card">
                        <img src="assets\img\传统舞蹈.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">传统舞蹈</h3>
                        <span class="gift__title"></span>
                    </article>

                    <article class="gift__card">
                        <img src="assets\img\传统戏剧.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">传统戏剧</h3>
                        <span class="gift__title"></span>
                    </article>

                    <article class="gift__card">
                        <img src="assets\img\传统美术.png" alt="" class="gift__img">
                        <i class='bx bx-heart gift__icon'></i>
                        
                        <h3 class="gift__price">传统美术</h3>
                        <span class="gift__title"></span>
                    </article>
                </div>
            </section>

            <!--==================== NEW ====================-->
            <section class="new section container" id="new">
                <h2 class="section__title">人物</h2>

                <div class="new__container">
                    <div class="swiper new-swiper">
                        <div class="swiper-wrapper">
                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets\img\张树萍_初心不改_戏大于天.png" alt="" class="new__img">
                                <h3 class="new__price">张树萍</h3>
                                <span class="new__title">初心不改，戏大于天</span>
                                
                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>

                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets\img\姚惠芬_苏绣大师.png" alt="" class="new__img">
                                <h3 class="new__price">姚惠芬</h3>
                                <span class="new__title">走进威尼斯双年展的中国苏绣大师</span>

                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>

                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets\img\尚长荣_老戏骨的创新之路.png" alt="" class="new__img">
                                <h3 class="new__price">尚长荣</h3>
                                <span class="new__title">“老戏骨”的创新之路</span>

                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>

                            <article class="new__card swiper-slide">
                                <div class="new__overlay"></div>

                                <img src="assets\img\刘魁立_行走田野_问俗追风.png" alt="" class="new__img">
                                <h3 class="new__price">刘魁立</h3>
                                <span class="new__title">行走田野 问俗追风</span>

                                <button class="button new__button">
                                    <i class='bx bx-heart new__icon'></i>
                                </button>
                            </article>
                        </div>

                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>

            <!--==================== MESSAGE ====================-->
            <section class="message section container">
                <div class="message__container grid">
                    <form action="" class="message__form">
                        <h2 class="message__title">文韵不息 <br> 非遗论坛</h2>
                        <input type="email" placeholder="写下你的留言" class="message__input">
                        <button class="button message__button">发送</button>
                    </form>

                    <img src="assets\img\不息.jpg" alt="" class="message__img">
                </div>
            </section>
        </main>

        <!--==================== FOOTER ====================-->
        <footer class="footer section">
            <div class="footer__container container grid">
                <div>
                    <a href="#" class="footer__logo">
                        <img src="assets\img\s5bf3825b320ab.png" alt="" class="footer__logo-img"> 
                        文韵不息
                    </a>

                    <p class="footer__description">
                        传承非遗 <br> 守望文化
                    </p>
                </div>

                <div>
                    <h3 class="footer__title">我们的服务</h3>

                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">交流</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">创新</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">开拓</a>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">帮助</h3>

                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">常见问题解答</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">服务中心</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">联系我们</a>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer__title">支持</h3>

                    <div class="footer__aviables">
                        <img src="assets/img/aviable1.png" alt="" class="footer__aviable-img">
                        <img src="assets/img/aviable2.png" alt="" class="footer__aviable-img">
                    </div>
                </div>

                <img src="assets\img\太极_对练.png" alt="" class="footer__img1">

            </div>

            <span class="footer__copy">&#169; Bedimcode. All rigths reserved</span>
        </footer>

        <!--=============== SCROLL UP ===============-->
        <a href="#" class="scrollup" id="scroll-up"> 
            <i class='bx bx-up-arrow-alt scrollup__icon' ></i>
        </a>

        <!--=============== SCROLL REVEAL ===============-->
        <script src="assets/js/scrollreveal.min.js"></script>

        <!--=============== SWIPER JS ===============-->
        <script src="assets/js/swiper-bundle.min.js"></script>

        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
    </body>
</html>